<template>
  <div class=" zy-content ">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">{{ $t('common.AssetClassfication') }}</p>
            <div class="ipt">
              <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="searchParams.name"
                     clearable></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('ledger.AssetDetails') }}</p>
            <div class="ipt">
              <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="searchParams.details"
                     clearable></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" type="primary" v-has="'deviceDepreciationList'"
                      @click="changeNum()">{{ $t('common.Query') }}
              </Button>
              <Button class="reset-btn" v-has="'deviceDepreciationList'"
                      @click="reset()" >
                {{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">

        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="createfaultCodeShowH" v-if="checkBtnPermission.deviceDepreciationAdd">{{ $t('common.New') }}
        </Button>
        <Button @click="exportTemplateClick" v-if="checkBtnPermission.deviceDepreciationExport">
          {{ $t('common.batchExport') }}
        </Button>
        <Button @click="importExcelShow" v-if="checkBtnPermission.deviceDepreciationImport">{{ $t('common.Import') }}
        </Button>
        <Button @click="exportTemplate" v-if="checkBtnPermission.deviceDepreciationDel">{{ $t('common.Download') }}
        </Button>
        <Button @click="delFaultCodeShowClick" v-if="checkBtnPermission.deviceDepreciationDelet">
          {{ $t('common.batchDelete') }}
        </Button>
        <Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏'):$t('隐藏操作栏') }}</Button>
      </div>
      <div class="tableContent">
        <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" ellipsis ref="selection" stripe :columns="columnsList" :data="dataArr"
               @on-selection-change="onSelectChange">
          <template slot-scope="{ row }" slot="action">
                    <span class="operationBtn" @click="createfaultCodeShowH(row)"
                          v-if="checkBtnPermission.deviceDepreciationUpdate">
                      <i class="iconfont zy-common-bianji"></i>
                      {{ $t('common.Edit') }}
                    </span>
            <span class="operationBtn" @click="delPrrShowH(row)"
                  v-if="checkBtnPermission.deviceDepreciationDelete">
              <i class="iconfont zy-common-shanchu"></i>
              {{ $t('common.Delete') }}
            </span>
          </template>
          <template slot-scope="{ row }" slot="belong">
            {{ row.belong / 1 === 1 ? '设备' : row.belong / 1 === 2 ? '备件' : '' }}
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="delIds.length"/>
        <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
              @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
      </div>
    </div>
    <Modal :mask-closable="false" v-model="create" :title="addtitle" class="modal-content-layout">

      <Form class="formList" :model="formItem" label-position="top">
        <!-- 资产分类 -->
        <FormItem :label="$t('ledger.AssetClassification')" required>
          <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="formItem.name"></Input>
        </FormItem>
        <!-- 资产详情 -->
        <FormItem :label="$t('ledger.AssetDetails')" required>
          <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="formItem.details"></Input>
        </FormItem>
        <!-- 折旧年限 -->
        <FormItem :label="$t('ledger.DepreciationLife')" required>
          <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="formItem.depreciation"></Input>
        </FormItem>
        <FormItem :label="$t('ledger.AttributionType')" required>
          <Select v-model="formItem.belong" :placeholder="`${$t('common.selectInfo')}`">
            <Option :value=1>设备</Option>
            <Option :value=2>备件</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="loading" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{ $t('common.confirmDelete') }}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
                      @importExcelChange="importExcelChange"></importExcelModal>
  </div>
</template>

<script>
import importExcelModal from '@/components/importExcel.vue';
import fileDownload from 'js-file-download';
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "deviceDepreciation",//设备折旧
  mixins:[toggleTableOperation],
  components: {importExcelModal},
  data() {
    return {
      importExcelState: false, /*批量导入*/
      formItem: {},
      addtitle: "",
      loading: false,
      create: false,
      searchParams: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          key: 'selection',
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          //title: '资产分类',
          title: `${this.$t('ledger.AssetClassification')}`,
          key: 'name',
          minWidth: 150,
          align: 'center',
          resizable: true
        },
        {
          // title: '资产详情',
          title: `${this.$t('ledger.AssetDetails')}`,
          key: 'details',
          minWidth: 150,
          align: 'center',
          resizable: true
        },
        {
          //  title: `${ this.$t('equipmentscrapped.DepreciationLife') }`,
          title: `${this.$t('equipmentscrapped.DepreciationLife')}`,
          key: 'depreciation',
          minWidth: 100,
          align: 'center',
          resizable: true
        },
        {
          //  title: '折旧年限',
          title: `${this.$t('ledger.AttributionType')}`,
          key: 'belong',
          slot: "belong",
          minWidth: 100,
          align: 'center',
          resizable: true
        },
        {
          // title: '创建人',
          title: `${this.$t('common.CreateBy')}`,
          key: 'realname',
          minWidth: 100,
          align: 'center',
          resizable: true
        },
        {
          //title: '创建时间',
          title: `${this.$t('common.CreateTime')}`,
          key: 'createTime',
          minWidth: 100,
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: "action",
          fixed: 'right',
          minWidth: 150,
          align: "center"
        }
      ],
      dataArr: [],
      delFaultCodeShowF: false,//是否显示删除弹窗
      pageSizeOption: [10, 20, 30, 40],
      delIds: [],
      selection: [],
      checkBtnPermission: {},
    }
  },
  created() {
    this.getTableColumnsWidth(this.columns)
  },
  mounted() {
    this.searchList();
    let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
    for (let item of itemList) {
      if (item.code == "deviceDepreciationAdd") {
        this.checkBtnPermission.deviceDepreciationAdd = true
      }
      if (item.code == "deviceDepreciationDelete") {
        this.checkBtnPermission.deviceDepreciationDelete = true
      }
      if (item.code == "deviceDepreciationUpdate") {
        this.checkBtnPermission.deviceDepreciationUpdate = true
      }
      if (item.code == "deviceDepreciationExport") {
        this.checkBtnPermission.deviceDepreciationExport = true
      }
      if (item.code == "deviceDepreciationImport") {
        this.checkBtnPermission.deviceDepreciationImport = true
      }
      if (item.code == "deviceDepreciationDel") {
        this.checkBtnPermission.deviceDepreciationDel = true
      }
    }
  },
  methods: {
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item, index) => {
        myArray.push(item.id);
      });
      this.delIds = myArray;
    },
    //点击批量删除
    delFaultCodeShowClick() {
      if (this.delIds.length == 0) {
        this.$Message.warning(({content: `${this.$t('common.deleteItems')}`, duration: 6, closable: true}));
        return
      } else {
        this.delFaultCodeShowF = true;
      }

    },
    /*导入*/
    importExcelShow() {
      this.importExcelState = true;
    },
    importExcelChange(val) {
      this.importExcelState = false;
      if (val === 'success') {
        this.changeNum();
      }
    },
    reset(){
      this.searchParams = {};
      this.changeNum();
    },
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //查询列表
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key])
        }
      }
      this.axios({
        method: 'get',
        url: '/dms/assetCategory/list',
        params: params

      }).then(res => {
        
        if (res.code === 200) {
          this.dataArr = res.data.list
          this.total = res.data.total
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    //点击增加或编辑
    createfaultCodeShowH(row) {//点击增加或编辑
      if (row.id) {
        this.addtitle = `${this.$t('common.Edit')}`
        this.formItem = {
          id: row.id,
          name: row.name,
          attributeCode: row.attributeCode,
          details: row.details,
          depreciation: row.depreciation,
          belong: row.belong
        };
      } else {
        this.addtitle = `${this.$t('common.New')}`
        this.formItem = {};
      }
      this.create = true;
    },
    //新增编辑
    addOk() {
      if (this.formItem.name === null || this.formItem.name === undefined || this.formItem.name === "") {
        this.$Message.warning(({content: "请填写资产分类", duration: 6, closable: true}));
        return false;
      }
      if (this.formItem.details === null || this.formItem.details === undefined || this.formItem.details === "") {
        this.$Message.warning(({content: "请填写资产详情", duration: 6, closable: true}));
        return false;
      }
      if (this.formItem.depreciation === null || this.formItem.depreciation === undefined || this.formItem.depreciation === "") {
        this.$Message.warning(({content: "请填写折旧年限", duration: 6, closable: true}));
        return false;
      }

      if (this.formItem.belong === null || this.formItem.belong === undefined || this.formItem.belong === "") {
        this.$Message.warning(({content: "请选择归属类型", duration: 6, closable: true}));
        return false;
      }
      this.loading = true;
      if (this.formItem.id) {
        this.axios({
          method: 'post',
          url: '/dms/assetCategory/updateAsset',
          data: this.formItem
        }).then(res => {
          this.loading = false;
          0
          if (res.code === 200) {
            this.changeNum();
            this.$Message.success("编辑成功");
            this.create = false;
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        })
      } else {
        this.axios({
          method: 'post',
          url: '/dms/assetCategory/add',
          data: this.formItem
        }).then(res => {
          this.loading = false;
          if (res.code === 200) {
            this.changeNum();
            this.$Message.success("新增成功");
            this.create = false;
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        })
      }

    },
    delPrrShowH(row) {
      //点击展示提示删除弹窗
      this.loading = false;
      this.delFaultCodeShowF = true;
      this.delIds = [];
      this.delIds.push(row.id);
    },
    //删除
    deleteOk() {
      this.delIds = this.delIds.toString()
      this.loading = true;
      this.axios({
        method: 'get',
        url: '/dms/assetCategory/deleteByIds',
        params: {ids: this.delIds}
      }).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.changeNum();
          this.$Message.success("删除成功");
          this.allCheck = false;
          this.delFaultCodeShowF = false;
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    //下载模板
    exportTemplate() {
      const filName = '设备折旧下载模板'
      this.axios({
        method: 'get',
        url: '/dms/assetCategory/downloadTemplate',
        responseType: 'blob',
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    //导出
    exportTemplateClick() {
      let params = {};
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key])
        }
      }
      const filName = '设备折旧'
      this.axios({
        method: 'get',
        url: '/dms/assetCategory/exportAsset',
        responseType: 'blob',
        params: {
          ...params,
          ids: this.delIds.join(',')
        }
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })

    },
  }
}
</script>

<style scoped lang="scss">
.ivu-input-number {
  width: -webkit-fill-available;
}
</style>

